<template>
  <div class="settlement-view">
    <div class="settlement-top">
        <img class="return-img" src="../assets/images/sreach/left.png" @click="$router.go(-1)">
        用户结算
    </div>
  
    <div class="user" @click="Toaddressdetail">
      <div class="user-info">
        <div class="user-name">{{ selAddress? selAddress?.contactInfo?.name:orderList[0]?.payName?orderList[0]?.payName:defaultAddress?.contactInfo?.name?defaultAddress?.contactInfo?.name:"请填写收货人姓名" }}</div>
        <div class="user-address">{{ selAddress?selAddress?.contactInfo?.province +" - "+selAddress?.contactInfo?.city+" - "+selAddress?.contactInfo?.county +" "+ selAddress?.contactInfo?.addressDetail+"("+ selAddress?.contactInfo?.areaCode+")" : orderList[0]?.payAddress?orderList[0]?.payAddress:defaultAddress?.contactInfo?.addressDetail
        ?defaultAddress?.contactInfo?.province +" - "+defaultAddress?.contactInfo?.city+" - "+defaultAddress?.contactInfo?.county +" "+        defaultAddress?.contactInfo?.addressDetail+"("+
        defaultAddress?.contactInfo?.areaCode+")"
        :"还没有地址，点击添加地址" }}</div>
      </div>
      <img src="../assets/images/sreach/right.png">
    </div>
   
    

    <div class="settlement-con">
      <!-- 分隔线 -->
      <div class="c-line"></div>

      <!-- 商品 -->
      <div class="cart-pro">
        <div class="cart-pro-item" v-for="(p, index) in orderList[0]?.payCart" :key="index">
          <div class="item-con">
            <img :src="p.img">
            <div class="name">{{ p.content }}</div>
          </div>

          <div class="price">
            <span v-show="p.number !== 1">{{ p.number }} X</span> {{ p.price }}
          </div>
        </div>
      </div>
    </div>

    <!-- 分隔线 -->
    <div class="c-line"></div>

    <div class="other">
      <div>
        <div>运费</div>
        <div class="grey">包邮</div>
      </div>
      <div>
        <div>电子普通发票</div>
        <div class="grey">个人</div>
      </div>
      <div>
        <div>优惠券</div>
        <div class="grey">无可用</div>
      </div>
    </div>

    <!-- 分隔线 -->
    <div class="c-line"></div>

    <div class="other">
      <div>
        <div><img src="../assets/images/支付-微信.png"> 微信支付</div>
        <div class="pay-type" @click="togglePayType(1)">
          <input type="radio" class="transparent-box" name="pay" id="wx">
          <label for="wx"></label>
        </div>
      </div>
      <div>
        <div><img src="../assets/images/支付-支付宝.png"> 支付宝支付</div>
        <div class="pay-type" @click="togglePayType(2)">
          <input type="radio" class="transparent-box" name="pay" id="zfb">
          <label for="zfb"></label>
        </div>
      </div>
      <div>
        <div><img src="../assets/images/支付-银联.png"> 银联在线</div>
        <div class="pay-type" @click="togglePayType(3)">
          <input type="radio" class="transparent-box" name="pay" id="yl">
          <label for="yl"></label>
        </div>
      </div>
    </div>

    <div class="settlement-bot">
      <div>共 {{ orderList[0]?.payNum }} 件 合计：<span>{{ orderList[0]?.payMoney }}</span></div>
      <div class="pay-btn" @click="payBtn">去付款</div>
    </div>
    
    <van-popup v-model="show" position="bottom" :style="{ height: '60.5vw' }" @closed="onCloseKeyboard">
      <div class="pwd-box">
        <div @click="addPwd">1</div>
        <div @click="addPwd">2</div>
        <div @click="addPwd">3</div>
        <div @click="addPwd">4</div>
        <div @click="addPwd">5</div>
        <div @click="addPwd">6</div>
        <div @click="addPwd">7</div>
        <div @click="addPwd">8</div>
        <div @click="addPwd">9</div>
        <div @click="cleanPwd" class="active" style="color: red;">清除</div>
        <div @click="addPwd">0</div>
        <div @click="delPwd" class="active">删除</div>
      </div>
    </van-popup>

    <van-popup v-model="show" :overlay="false" :style="{'margin-top': '-100px'}" round closeable>
      <div class="pwd-show">
        <div class="pwd-name">请输入支付密码</div>
        <div class="pwd-confirm">
          <div>{{ passwordIndex >= 1 ? '*':''}}</div>
          <div>{{ passwordIndex >= 2 ? '*':''}}</div>
          <div>{{ passwordIndex >= 3 ? '*':''}}</div>
          <div>{{ passwordIndex >= 4 ? '*':''}}</div>
          <div>{{ passwordIndex >= 5 ? '*':''}}</div>
          <div>{{ passwordIndex == 6 ? '*':''}}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapState, mapGetters } from 'vuex'
export default {
  props:['id'],
  data(){
    return {
      checkedbtn: true,
      payType: 0,
      orderList: [],
      show: false,
      passwordIndex: 0,
      defaultAddress: [],
      selAddress: []
    }
  },
  computed: {
    ...mapState(['account','local']),
    ...mapGetters(['totalAmount','goodsNum','payCart']), 
  },
  methods:{
    Toaddressdetail(){
      this.$router.push({
        path: '/address',
      })
    },

    // 获取订单地址，商品
    getOrderList(id = this.id){
      let payCartList = JSON.parse(localStorage.payCartList || '[]')
      let addressList = JSON.parse(localStorage.addressList || '[]')
      this.defaultAddress = addressList.filter(k => k.contactInfo.isDefault)[0]
      this.selAddress = addressList.filter(k => k.isSelect)[0]
      if(payCartList[0]){
        this.orderList = payCartList.filter(k => k.payId == id)
      }
    },

    togglePayType(n) {
      this.payType = n
      console.log(this.payType);
    },

    payBtn(){
      if(this.payType){
        this.show = true
        
      }else{
        Toast('请选择支付方式')
      }
    },

    addPwd(){
      if(this.passwordIndex < 6){
        this.passwordIndex++

        if(this.passwordIndex === 6){
          let payCartList = JSON.parse(localStorage.payCartList || '[]')
          let isOrder = payCartList.filter(k => k.payId == this.id)[0]
          let payCart = {
            payId: this.id,
            payCart: isOrder.payCart,
            payMoney: isOrder.payMoney,
            payNum: isOrder.payNum,
            payName: this.selAddress? this.selAddress?.contactInfo?.name:this.orderList[0]?.payName?this.orderList[0]?.payName:this.defaultAddress?.contactInfo?.name?this.defaultAddress?.contactInfo?.name:this.account,
            payAddress: this.selAddress?this.selAddress?.contactInfo?.province +" - "+this.selAddress?.contactInfo?.city+" - "+this.selAddress?.contactInfo?.county +" "+ this.selAddress?.contactInfo?.addressDetail+"("+ this.selAddress?.contactInfo?.areaCode+")" : this.orderList[0]?.payAddress?this.orderList[0]?.payAddress:this.defaultAddress?.contactInfo?.addressDetail?this.defaultAddress?.contactInfo?.province +" - "+this.defaultAddress?.contactInfo?.city+" - "+this.defaultAddress?.contactInfo?.county +" "+        this.defaultAddress?.contactInfo?.addressDetail+"("+
            this.defaultAddress?.contactInfo?.areaCode+")":"",
            payType: this.payType,
            state: 2    // 1 为未支付，2 为待发货，3为已收货
          }
          payCartList = [payCart, ...payCartList.filter(k => k.payId != this.id)]
          localStorage.payCartList = JSON.stringify(payCartList)

          Toast('支付成功')

          let addressList = JSON.parse(localStorage.addressList || '[]')
          let selAddress = addressList.filter(k => k.isSelect)[0]

          if(selAddress){
            let address = {
                addressId: selAddress.addressId,
                contactInfo: selAddress.contactInfo,
                isSelect: false
            }
            addressList = [address, ...addressList.filter(k => k.addressId != selAddress.addressId)]
            localStorage.addressList = JSON.stringify(addressList)
          }

          this.$router.push({path:'/order'})
        }
      }
    },

    cleanPwd(){
      this.passwordIndex = 0
    },

    delPwd(){
      if(this.passwordIndex > 0){
        this.passwordIndex--
      }
    },

    // 关闭支付键盘
    onCloseKeyboard(){
      this.passwordIndex = 0
      console.log("ks");
    },
  },
  beforeRouteUpdate(to,from,next){
    this.getOrderList(to.params.id)
    next()
  },
  mounted(){
    this.getOrderList()
  }

}
</script>

<style lang="scss" scoped>
.settlement-view{
  padding-top: 13vw;
  height: 100vh;
  background-color: #f5f5f5;

  .settlement-top{
    color: #666666;
    width: 100vw;
    height: 13vw;
    text-align: center;
    line-height: 13vw;
    background-color: #f2f2f2;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 999;

    .return-img{
      width: 8vw;
      height: 8vw;
      position: absolute;
      left: 2vw;
      top: 2.5vw;
    }
  }

  .user{
    width: 100vw;
    height: 28vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4vw;
    box-sizing: border-box;
    background-color: #ffffff;
    border-top: #f77954 4px dashed;
    
    .user-info{
      width: 80vw;

      .user-name{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 1vw;
      }

      .user-address{
        font-size: 14px;
        color: #666666;
      }
    }

    img{
      width: 6vw;
      height: 6vw;
    }
  }
  
  .c-line{
    width: 100vw;
    height: 2vw;
    background-color: #f5f5f5;
    border-top: #ececec 1px solid;
    border-bottom: #ececec 1px solid;
  }

  .settlement-con{
    background-color: #ffffff;
    border: #f2f2f2 1px solid;
    border-bottom: none;
    

    .cart-pro-item{
      width: 100vw;
      height: 14vw;
      line-height: 10vw;
      display: flex;
      justify-content: space-between;
      padding: 2vw 4vw 2vw 2vw;
      box-sizing: border-box;
      border-bottom: #f2f2f2 1px solid;

      .item-con{
        display: flex;
        img{
          width: 10vw;
          height: 10vw;
        }
        
        .name{
          width: 65vw;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      
      .price{
        font-weight: bold;

        span{
          font-size: 12px;
          font-weight: 200;
        }
      }
    }
  }

  .settlement-bot{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 14vw;
    line-height: 14vw;
    color: #ff5722;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    z-index: 999;

    div{
      width: 50%;
      text-align: center;

      span{
        font-weight: bold;
      }
    }

    .pay-btn{
      color: #ffffff;
      background-color: #ff5722;
      
    }
  }
  
  .other{
    font-size: 14px;
    padding: 0 4vw;
    background-color: #ffffff;

    div{
      line-height: 12vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px #ececec solid;

      img{
        width: 5vw;
        margin-right: 2vw;
      }

      .grey{
        color: #999;
      }

      .pay-type {
        width: 10vw;
        font-size: 12px;
        text-align: center;
        position: relative;

        .transparent-box +label{
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-2.5vw);
          display: inline-block;
          width: 4vw;
          height: 4vw;
          border: #999 1px solid;
          border-radius: 50%;
          background: transparent;
        }

        .transparent-box:checked +label::before{
          position: absolute;
          top: -1px;
          left: -1px;
          color: #ffffff;
          content: "";
          display: inline-block;
          width: 4vw;
          height: 4vw;
          font-size: 16px;
          border-radius: 50%;
          background: #ff6a1b url(../assets/images/check_press.png) no-repeat;
          background-size: contain;
          border: #ff6a1b 1px solid;
        }

        input[type=radio]{
          visibility: hidden;
        }
      }

      &:last-of-type {
        border-bottom: none;
      }
    }

  }

  .pwd-box{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;

    div{
      font-size: 20px;
      width: 33.3vw;
      height: 15vw;
      line-height: 15vw;
      text-align: center;
      border: #ececec 1px solid;
      box-sizing: border-box;
      background-color: #ffffff;

      &:active{
        background-color: #ececec;
      }

      &.active{
        font-size: 18px;
        font-weight: normal;
      }
    }
  }

  .pwd-show{
    width: 80vw;
    height: 36vw;
    padding-bottom: 5vw;

    .pwd-name{
      height: 20vw;
      line-height: 20vw;
      text-align: center;
    }

    .pwd-confirm{
      width: 72vw;
      height: 12vw;
      display: flex;
      margin: 0 auto;
      border: #ccc 1px solid;

      div{
        font-size: 30px;
        width: 12vw;
        height: 12vw;
        line-height: 15vw;
        text-align: center;
        border-right: #ccc 1px solid;

        &:last-of-type{
          border-right:none
        }
      }
    }
  }
}
</style>